<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<! DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>忘记密码 - 人事管理系统</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="人事管理系统">
<meta name="description" content="人事管理系统">
<meta name="author" content="gec">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
</head>
<style>
.bgc {
	background-color: #FFDEE9;
	background-image: linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 100%);
	position: absolute;
	width: 100%;
	height: 100%;
}

#lname, #pwd, #phone, #un, #up {
	height: 30px;
	width: 70%;
	margin-left: 10%;
}

#showO {
	float: right;
	margin-right: 110px;
	margin-top: -42px;
	display: none;
}

#showT {
	float: right;
	margin-right: 110px;
	margin-top: -42px;
	display: none;
}
</style>
<body>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<!--消息提示-->
	<script src="js/bootstrap-notify.min.js"></script>
	<script type="text/javascript" src="js/lightyear.js"></script>
	<div class="bgc">
		<div class="container-fluid" style="margin-top: 10%;">
			<div class="lyear-layout-sidebar-scroll"
				style="height: 40%; background-color: rgba(66, 66, 66, 0.4); margin-left: 20%; margin-right: 20%;">
				<div class="login-center">
					<div class="col-lg-12">
						<div class="card-header">
							<div class="login-header text-center">
								<img alt="light year admin" src="images/logo-hrm.png">
							</div>
						</div>
						<button class="btn btn-secondary" type="button"
							style="float: right;" id="returnLogin">返回登录页</button>
						<div class="card-body">
							<form action="modifyPWD" method="post" class="guide-box"
								data-navigateable="true">
								<ul class="nav-step step-dots">
									<li class="nav-step-item active"><span>输入账号</span> <a
										class="active" data-toggle="tab" href="#step-1"></a></li>
									<li class="nav-step-item"><span>验证手机号</span> <a
										data-toggle="tab" href="#step-2"></a></li>
									<li class="nav-step-item"><span>设置新密码</span> <a
										data-toggle="tab" href="#step-3"></a></li>
									<li class="nav-step-item"><span>确认修改</span> <a
										data-toggle="tab" href="#step-4"></a></li>
								</ul>
								<!--对应内容-->
								<div class="nav-step-content">
									<div class="nav-step-pane hidden active" id="step-1">
										<div class="form-group">
											<input class="form-control" type="text" placeholder="请输入您的账号"
												required="required" name="lname" id="lname"
												onchange="getname()"> <span id="showO"
												class="mdi mdi-close-circle-outline mdi-36px
							"></span>
											<span id="showT"
												class="mdi mdi-checkbox-marked-circle mdi-36px mdi-light
							"></span>
										</div>
									</div>
									<div class="nav-step-pane hidden" id="step-2">
										<div class="form-group">
											<input class="form-control" type="text"
												placeholder="请输入您的手机号" required="required" name="phone"
												id="phone">
										</div>
									</div>
									<div class="nav-step-pane hidden" id="step-3">
										<div class="form-group">
											<input class="form-control" type="password"
												placeholder="请输入新的密码" required="required" name="pwd"
												id="pwd" onchange="getpwd()">
										</div>
									</div>
									<div class="nav-step-pane hidden" id="step-4">
										<div class="form-group">
											<label>账号:</label><input class="form-control" type="text"
												value="" readonly="readonly" id="un"><label>密码:</label><input
												class="form-control" type="text" value=""
												readonly="readonly" id="up">
										</div>
									</div>
								</div>
								<hr>
								<div class="nav-step-button">
									<button class="btn btn-secondary disabled" data-wizard="prev"
										type="button">上一步</button>
									<button class="btn btn-secondary" data-wizard="next"
										type="button" id="next">下一步</button>
									<button class="btn btn-primary hidden" data-wizard="finish"
										type="submit">确认修改</button>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
	<script type="text/javascript" src="js/main.min.js"></script>
	<!--向导插件-->
	<script type="text/javascript" src="js/jquery.bootstrap.wizard.min.js"></script>
	<script type="text/javascript">
		$(document).ready(
				function() {
					$('.guide-box').bootstrapWizard(
							{
								'tabClass' : 'nav-step',
								'nextSelector' : '[data-wizard="next"]',
								'previousSelector' : '[data-wizard="prev"]',
								'finishSelector' : '[data-wizard="finish"]',
								'onTabClick' : function(e, t, i) {
									if (!$('.guide-box').is(
											'[data-navigateable="true"]'))
										return !1
								},
								'onTabShow' : function(e, t, i) {
									t.children(":gt(" + i + ").complete")
											.removeClass("complete");
									t.children(":lt(" + i + "):not(.complete)")
											.addClass("complete");
								},
								'onFinish' : function(e, t, i) {
									// 点击完成后处理提交
									return false;
								}
							});
				});

		//实时获取输入的账号
		function getname() {
			var name = document.getElementById('lname').value; 
			document.getElementById('un').value = name;
		};

		//实时获取输入的密码
		function getpwd() {
			var pwd = document.getElementById('pwd').value; 
			document.getElementById('up').value = pwd;
		};

		$(document).ready(function() {
			$('#returnLogin').click(function() {
				window.location.href = "login.jsp";
			});
		});

		//判断账号是否存在
		$(function() {
			//给文本框绑定一个失去焦点的事件blur
			$("#lname").on("blur", function() {
				/* 				if ($('#showT').is(':hidden')) {
				 document.getElementById("next").disabled = true;
				 } else {
				 document.getElementById("next").disabled = false;
				 } */
				//先得到文本框中的值
				var loginname = $(this).val();
				//发送一个ajax的异步请求
				if (loginname != "") { //没有输入内容时不判断
					$.ajax({
						url : "lNameCheck",
						data : {
							"loginname" : loginname
						},
						async : true,
						type : "post",
						dataType : "text",
						success : function(resultData) { //当ajax请求成功了，会自动执行的回调函数,参数resultData,服务器端返回给客户的数据自动映射在resultData变量当中
							if (resultData == "true") {
								$("#showO").hide();
								$("#showT").show();
							} else {
								$("#showO").show();
								$("#showT").hide();
							}
						},
						error : function() {//如果ajax执行过程中出错，会自动执行error的这个回调函数
							alert("请求出错了!!");
						}
					});
				}
			});
		});
	</script>
	<c:if test="${msg eq '修改成功!' }">
		<script>
			var msg = "${msg }";
			lightyear.loading('show');
			// 假设ajax提交操作
			setTimeout(function() {
				lightyear.loading('hide');
				lightyear.url('login.jsp');
				lightyear.notify('修改成功，页面将自动跳转~', 'success', 3000);
			}, 1000)
		</script>
	</c:if>
	<c:if test="${msg eq '修改失败!' }">
		<script>
			var msg = "${msg }";
			lightyear.loading('show');
			// 假设ajax提交操作
			setTimeout(function() {
				lightyear.loading('hide');
				lightyear.url('forgetpwd.jsp');
				lightyear.notify(msg, 'danger', 3000);
			}, 1)
		</script>
	</c:if>
	<c:if test="${msg eq '账号与手机号不一致!' }">
		<script>
			var msg = "${msg }";
			lightyear.loading('show');
			// 假设ajax提交操作
			setTimeout(function() {
				lightyear.loading('hide');
				lightyear.url('forgetpwd.jsp');
				lightyear.notify(msg, 'danger', 3000);
			}, 1)
		</script>
	</c:if>
	<c:if test="${msg eq '修改失败,账号不存在!' }">
		<script>
			var msg = "${msg }";
			lightyear.loading('show');
			// 假设ajax提交操作
			setTimeout(function() {
				lightyear.loading('hide');
				lightyear.url('forgetpwd.jsp');
				lightyear.notify(msg, 'danger', 3000);
			}, 1)
		</script>
	</c:if>
</body>
</html>